<template>
    <xui-dialog :title="props.title" width="400px" @register="register" @close="cusClose" @confirm="cusConfirm">
        <p>{{ props.message }}</p>
        <div>
            <input type="text" v-model="init_value" />
        </div>
    </xui-dialog>
</template>
<script lang="ts" setup>
import { ref, onMounted } from 'vue'

import XuiDialog from './index.vue'
import { useDialog } from './index'

let props = defineProps({
    title: {
        type: String,
        default: () => ''
    },
    message: {
        type: String,
        default: () => ''
    },
    value: {
        type: String,
        default: () => ''
    }
})

let init_value = ref<string>(props.value)

let emits = defineEmits(['close', 'confirm'])

let { register, dialog } = useDialog()

let cusClose = () => {
    emits('close')   
}

let cusConfirm = () => {
    emits('confirm', init_value.value)
    dialog.close()
}

onMounted(() => {
    dialog.open()
})

</script>